<template>
  <div style="padding: 10px 20px">
    <x-button type="primary" iconPlacement="right" @click="clickFun">
      <template #icon>
        <HomeOutlined />
      </template>
      按钮
    </x-button>
    <x-input placeholder="inputs" type="password" @change="clickFun"></x-input>
    <x-skeleton>
      <template #avatar>
        <x-skeleton-avatar></x-skeleton-avatar>
      </template>
    </x-skeleton>

    <div style="width: 300px;border: 1px solid red;">
      <x-skeleton-paragraph width="70" row="3"></x-skeleton-paragraph>
    </div>
  </div>
</template>

<script setup lang="ts">
import { HomeOutlined } from '@ant-design/icons-vue'

const clickFun = (e: MouseEvent) => {
  console.log('test', e)
}
</script>

<style lang="scss" scoped>
@import '../../packages/theme-chalk/src/button.scss';

.btn_test {
  @include button-variant('success', yellow, blue);
}
</style>
